import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Button, Form } from 'antd';
import Moved from './move/Moved';
import MoveLog from './move/MoveLog';
import { Synergy } from '../components/Portal/Portal';

import {
  WeaSearchGroup,
  WeaNewScroll,
  WeaDialog,
  WeaTop,
  WeaRightMenu,
  WeaErrorPage,
  WeaTools,
  WeaTab,
  WeaFormItem,
  WeaLocaleProvider,
} from 'ecCom';
import { WeaSwitch } from 'comsMobx';

const getLabel = WeaLocaleProvider.getLabel;
@inject('docMoveStore')
@observer
class Move extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabDatas:[
        { title: getLabel(77, '复制'), key: 'copy' },
        { title: getLabel(78, '移动'), key: 'move' },
      ]
    };
  }

  componentDidMount() {
    const { docMoveStore } = this.props;
    let { moveCategory, tabKey } = docMoveStore;
    docMoveStore.doSearch('MoveCopy')
      .getRightMenu('MoveCopy')
      .getConditionInfo('MoveCopy');
    if (tabKey === 'move') {
      moveCategory({ operation: 0 });
    } else {
      moveCategory({ operation: 1 });
    }
  }

  componentWillReceiveProps() {
    const { docMoveStore } = this.props;
    let { moveCategory, tabKey, clearShow } = docMoveStore;
    docMoveStore.doSearch('MoveCopy')
      .getRightMenu('MoveCopy')
      .getConditionInfo('MoveCopy');
    if (tabKey === 'move') {
      moveCategory({ operation: 0 });
    } else {
      moveCategory({ operation: 1 });
    }
    clearShow();
  }

  componentWillUnmount() {
    const { docMoveStore } = this.props;
    const { clearShow } = docMoveStore;
    clearShow();
  }

  onRightMenuClick() {
    const Arr = [];
    return Arr;
  }
  getDropMenuProps=()=>{
    const {docMoveStore}=this.props;
    return {
      collectParams: {
        favname: docMoveStore.title,
        favouritetype: 2,
        objid: 0,
        importantlevel: 1,
        link: 'wui/index.html#/main/document/move',
      },
    }
  }
  getCollectParams=()=>{
    const {docMoveStore}=this.props;
    return {
      favname: docMoveStore.title,
      favouritetype: 2,
      objid: 0,
      importantlevel: 1,
      link: 'wui/index.html#/main/document/move',
    }
  }
  onTabKeyChange=(tabKey) => {  
    const { docMoveStore } = this.props;
    const {changeTabKey } = docMoveStore;
    changeTabKey(tabKey);
  }
  getSearchType=()=>{
    const { docMoveStore } = this.props;
    const { show} = docMoveStore;
    return show.docShow ? ['base', 'advanced'] : ''
  }
  getSearchBaseValue=()=>{
    const { docMoveStore } = this.props;
    const { form} = docMoveStore;
    return form.getFormParams()[this.quickSearchPara] || ''
  }
  onSearchChange= value => {
    const { docMoveStore } = this.props;
    const { form} = docMoveStore;
    form.updateFields({ [this.quickSearchPara]: { value } })
  }
  onTabSearch=() => {
    const { docMoveStore } = this.props;
    const { doSearch,  form,  ids } = docMoveStore;
    doSearch('MoveCopy', { sourceId: ids.srcsecid, ...form.getFormParams() });
  }
  hideSearchAd=() => {
    const { docMoveStore } = this.props;
    const {  setState, } = docMoveStore;
    setState({ showSearchAd: false })
  }
  setShowSearchAd=bool => {
    const { docMoveStore } = this.props;
    const {  setState, } = docMoveStore;
    setState({ showSearchAd: bool })
  }
  render() {
    const { docMoveStore } = this.props;
    const { doSearch, tabKey, showSearchAd, setState, form, showThumbnails, ids } = docMoveStore;
    return (
      <div className="wea-doc-move">
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ql3opx`}
          collectParams={this.getCollectParams()}
          datas={this.getRightMenu()}
          onClick={this.onRightMenuClick}
        >
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@tyjycw`}
            title={docMoveStore.title}
            loading={docMoveStore.loading}
            icon={<i className="icon-coms-doc" />}
            iconBgcolor="#df583a"
            buttons={this.getButtons()}
            buttonSpace={10}
            showDropIcon={true}
            dropMenuDatas={this.getRightMenu()}
            dropMenuProps={this.getDropMenuProps()}
            onDropMenuClick={this.onRightMenuClick}
          >
            <div className="move" style={{ height: '100%' }}>
              <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@xw5ivg`}
                datas={this.state.tabDatas}
                keyParam="key"
                selectedKey={tabKey}
                onChange={this.onTabKeyChange}
                searchType={this.getSearchType()}
                searchsBaseValue={this.getSearchBaseValue()}
                onSearch={this.onTabSearch}
                onSearchChange={this.onSearchChange}
                showSearchAd={showSearchAd}
                hideSearchAd={this.hideSearchAd}
                searchsAd={this.getSearchs()}
                setShowSearchAd={this.setShowSearchAd}
                buttonsAd={this.getTabButtonsAd()}
              />
              <div className="move-tabContent">
                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@26fcfw`} height={'100%'}>
                  <Moved ecId={`${this && this.props && this.props.ecId || ''}_Moved@5fy1u0`} />
                </WeaNewScroll>
              </div>
            </div>
          </WeaTop>
        </WeaRightMenu>
        <MoveLog ecId={`${this && this.props && this.props.ecId || ''}_MoveLog@ep7ntn`} />
         <Synergy ecId={`${this && this.props && this.props.ecId || ''}_Synergy@7ygcpi`} pathname="/document/move" secid="-1" docid="-1" />
      </div>
    );
  }

  getRightMenu() {
    const { docMoveStore } = this.props;
    const {
      rightMenu, form, comsWeaTableStore, loading, doSearch, checkedKeys, showThumbnails,
      setState, doShow, doBack, moveOrCopy, ids, show, tabKey, setButtonHide, buttonHide,
    } = docMoveStore;
    const selectedRowKeys = toJS(comsWeaTableStore.selectedRowKeys);
    // const loadingNow = loading || comsWeaTableStore.loading;
    const btnArr = [];
    rightMenu.forEach((m) => {
      let disabled = (selectedRowKeys.length === 0 || buttonHide === true);
      let content = m.menuName;
      if (m.type === 'BTN_SEARCH') { // 搜索
        if (show.docShow) {
          btnArr.push({
            key: m.type,
            icon: <i className={m.menuIcon} />,
            content,
            disabled: false,
            onClick: () => {
              doSearch('MoveCopy', { sourceId: ids.srcsecid, ...form.getFormParams() });
              setState({ checkedKeys: [] });
            },
          });
        }
      } else if (m.type === 'BTN_NEXT') { // 下一步
        if (show.moveShow) {
          btnArr.push({
            key: m.type,
            icon: <i className={m.menuIcon} />,
            content,
            disabled: false,
            onClick: () => {
              doShow();
            },
          });
        }
      } else if (m.type === 'BTN_PREVIOUS') { // 返回上一步
        if (show.docShow) {
          btnArr.push({
            key: m.type,
            icon: <i className={m.menuIcon} />,
            content,
            disabled: false,
            onClick: () => {
              doBack();
            },
          });
        }
      } else if (m.type === 'BTN_COPY') { // 复制
        if (show.docShow && tabKey === 'copy') {
          btnArr.push({
            key: m.type,
            icon: <i className={m.menuIcon} />,
            content,
            disabled,
            onClick: () => {
              setButtonHide(true);
              moveOrCopy('copy');
            },
          });
        }
      } else if (m.type === 'BTN_MOVE') { // 移动
        if (show.docShow && tabKey === 'move') {
          btnArr.push({
            key: m.type,
            icon: <i className={m.menuIcon} />,
            content,
            disabled,
            onClick: () => {
              setButtonHide(true);
              moveOrCopy('copy');
            },
          });
        }
      } else if (m.type === 'BTN_COPYANDRESET') { // 复制并重置默认共享
        if (show.docShow && tabKey === 'copy') {
          btnArr.push({
            key: m.type,
            icon: <i className={m.menuIcon} />,
            content,
            disabled,
            onClick: () => {
              setButtonHide(true);
              moveOrCopy('reset');
            },
          });
        }
      } else if (m.type === 'BTN_MOVEANDRESET') { // 移动并重置默认共享
        if (show.docShow && tabKey === 'move') {
          btnArr.push({
            key: m.type,
            icon: <i className={m.menuIcon} />,
            content,
            disabled,
            onClick: () => {
              setButtonHide(true);
              moveOrCopy('reset');
            },
          });
        }
      } else if (m.type === 'BTN_LOG') { // 日志
        btnArr.push({
          key: m.type,
          icon: <i className={m.menuIcon} />,
          content,
          disabled: false,
          onClick: () => {
            docMoveStore.setState({ showDocLog: true });
          },
        });
      } else if (m.type === 'BTN_MINIATURE_DISPLAY') { // 缩略图显示
        if (show.docShow) {
          btnArr.push({
            key: m.type,
            icon: <i className={m.menuIcon} />,
            content,
            disabled: true,
            onClick: () => {
            },
          });
        }
      }
      // disabled = loadingNow || disabled;
    });
    return btnArr;
  }

  getButtons() {
    const { docMoveStore } = this.props;
    const { doBack, show, moveOrCopy, comsWeaTableStore, tabKey, setButtonHide } = docMoveStore;
    const selectedRowKeys = toJS(comsWeaTableStore.selectedRowKeys);
    const buttonHide = docMoveStore.buttonHide;
    let Arr = [];
    if (show.docShow) {
      if (tabKey === 'move') {
        Arr = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@chcw4b@$move`} type="primary"
          disabled={selectedRowKeys.length === 0 || buttonHide === true}// 置灰
          onClick={() => {
            setButtonHide(true);
            moveOrCopy('copy');
          }}
        >{getLabel(78, '移动')}</Button>,
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0p5hbm@moveAndReset`} type="primary"
          disabled={selectedRowKeys.length === 0 || buttonHide === true}
          title={getLabel(33246, '移动并重置默认共享')}
          onClick={() => {
            setButtonHide(true);
            moveOrCopy('reset');
          }}
        >{getLabel(385091, '移动并重置...')}</Button>,
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jy6nm4@$doBack`} type="primary"
          onClick={() => {
            doBack();
          }}
        >{getLabel(385090, '返回上一步')}</Button>];
      } else {
        Arr = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@78rdnb@copy`} type="primary"
          disabled={selectedRowKeys.length === 0 || buttonHide === true}
          onClick={() => {
            setButtonHide(true);
            moveOrCopy('copy');
          }}
        >{getLabel(77, '复制')}</Button>,
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@l3q1ar@moveAndResetShare`} type="primary"
          disabled={selectedRowKeys.length === 0 || buttonHide === true}
          title={getLabel(33247, '复制并重置默认共享')}
          onClick={() => {
            setButtonHide(true);
            moveOrCopy('reset');
          }}
        >{getLabel(385082, '复制并重置...')}</Button>,
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@32g8xz@doBack2`} type="primary"
          onClick={() => {
            doBack();
          }}
        >{getLabel(385090, '返回上一步')}</Button>];
      }
    }
    return Arr;
  }
  onSearch=() => {
    const { docMoveStore } = this.props;
    const { form, doSearch, setState, ids } = docMoveStore;
    doSearch('MoveCopy', { sourceId: ids.srcsecid, ...form.getFormParams() });
    setState({ showSearchAd: false, checkedKeys: [] });
  }
  getSearchs() {
    const { docMoveStore } = this.props;
    const { conditioninfo, form } = docMoveStore;
    const { isFormInit } = form;
    const group = [];
    const formParams = form.getFormParams();
    isFormInit && toJS(conditioninfo).forEach((c) => {
      let items = [];
      c.items.forEach((field) => {
        if (field.isQuickSearch) {
          this.quickSearchPara = field.domkey[0];
        }
        items.push({
          com: (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@7gxcld@${field.domkey[0]}`}
              label={`${field.label}`}
              labelCol={{ span: field.labelcol }}
              wrapperCol={{ span: field.fieldcol }}
            >
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@ww63zw@${field.domkey[0]}`} fieldConfig={field} form={form} formParams={formParams} onEnterSearch={this.onSearch} />
            </WeaFormItem>
          ),
          colSpan: 1,
        });
      });
      group.push(
        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@lsrnau@${c.title}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} />,
      );
    });
    return group;
  }

  getTabButtonsAd() {
    const { docMoveStore } = this.props;
    const { form, doSearch, setState, ids } = docMoveStore;
    const btns = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@71rm1e@search`} type="primary"
      onClick={this.tabSearchClick}
    >{getLabel(197, '搜索')}</Button>];
    btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@i636tl@reset`} type="ghost" onClick={this.onReset}>{getLabel(2022, '重置')}</Button>);
    btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0dg5ir@$cancle`} type="ghost" onClick={this.tabCancelClick}>{getLabel(31129, '取消')}</Button>);
    return btns;
  }

  onReset=()=>{
    const { docMoveStore } = this.props;
    const { form } = docMoveStore;
    form.reset();
  }
  tabSearchClick=() => {
    const { docMoveStore } = this.props;
    const { form, doSearch, setState, ids } = docMoveStore;
    doSearch('MoveCopy', { sourceId: ids.srcsecid, ...form.getFormParams() });
    setState({ showSearchAd: false, checkedKeys: [] });
  }
  tabCancelClick=() => {
    const { docMoveStore } = this.props;
    const { setState } = docMoveStore;
    setState({ showSearchAd: false })
  }
}

export default WeaTools.tryCatch(React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@lfcg9y`} msg={props.error ? props.error : getLabel(385218, '对不起，该页面异常，请联系管理员！')} />,
  { error: '' },
)(Move);

